<template>
  <div>
    <!-- 右边最上面的容器 -->
    <!-- 用户登录成功的头像，昵称，退出按钮 -->
    <div v-if="userInfo != null" class="userImg">
      <img :src="userInfo.profile.avatarUrl" alt="" />
      <span class="username">{{ userInfo.profile.nickname }}</span>
      <div class="userdetail">
        <span><p>关注</p><p>{{ userInfo.profile.followeds }}</p></span>
        <span><p>粉丝</p> <p>{{ userInfo.profile.follows }}</p></span>
        <span><p>歌单数量</p><p>{{ userInfo.profile.playlistCount }}</p> </span>
      </div>
    </div>
    <router-link to="/login" v-else>
      <div class="rightwrap-top">
        <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
        <div>用户登录</div>
      </div>
    </router-link>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      profiless: false,
    };
  },
  methods: {
    getUserInfo() {
      console.log("userInfoPage:", this.userInfo);
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<style lang="scss" scoped>
.middlewrap .rightwrap {
  overflow: hidden;
  width: 250px;
  height: 1400px;
  float: right;
  overflow: hidden;
  border-left: 1px solid #ccc;
}

/* 右边最上面容器 */
.rightwrap .rightwrap-top {
  background-image: linear-gradient(#fff, #dbd9d9);
  height: 126px;
  box-shadow: 0 1px 0 #999999;
}

.rightwrap .rightwrap-top p {
  margin: 0 auto;
  text-align: center;
  width: 205px;
  line-height: 22px;
  padding: 16px 5px;
  color: #666;
  font-size: 12px;
}

.rightwrap .rightwrap-top div {
  cursor: pointer;
  width: 100px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  background-image: linear-gradient(#f71f1f, #ac0701);
  margin: 0 auto;
  color: #fff;
  font-size: 12px;
  box-shadow: 0 1px 0 #8a060b;
  border-radius: 5px;
}
//显示登录用户头像和姓名
.userImg{
  background-image: linear-gradient(#fff, #dbd9d9);
  height: 170px;
  width: 100%;
}
.userImg img {
  display: inline-block;
  width: 80px;
  height: 80px;
  border:1px solid #ccc;
  margin-left: 15px;
  margin-top: 15px;
}
.userImg .username{
  color: #000;
  font-weight:600;
  font-size: 20px;
  margin-left: 10px;
}
.userImg .userdetail{
  width: 100%;
}
.userImg .userdetail span{
  margin-left: 35px;
  margin-top: 20px;
  color:#666;
  float: left;
  text-align: center;
}
.userImg .userdetail span p:last-child{
  margin-top: 5px;
  font-size: 16px;
  font-weight: 600;
}
</style>
